<template>
  <div class="bgc-default pad-20">
    <div class="bg-color-white pad-20">
      <!--顶部搜索 -->
      <div class="top-operate-default">
        <div class="search-item">
          <label>订单搜索：</label>
          <el-select v-model="batPay.textCol">
            <el-option label="支付单号" value="payNo"></el-option>
            <el-option label="经销商姓名" value="memberNickname"></el-option>
            <el-option label="经销商手机" value="memberPhone"></el-option>
          </el-select>
          <el-input style="width: 200px" v-model="batPay.textValue" placeholder="请输入内容"
            @keyup.enter.native="handleSearch"></el-input>
          <label class="mar-l-20">支付时间：</label>
          <el-date-picker v-model="batPay.payTimeArray" type="daterange" range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" start-placeholder="支付时间开始"
            end-placeholder="支付时间结束">
          </el-date-picker>
          <label class="mar-l-20">支付方式：</label>
          <el-select v-model="batPay.payType" placeholder="支付方式" class="pad-l-10">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(val, key) in dict.payType" :key="key" :label="val" :value="key"></el-option>
          </el-select>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch" style="margin-left: 10px;">查询</el-button>
            <el-button plain="" @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!-- 全选、操作 -->
      <div>
        <div class="pad-t-15 pad-b-15 font-14 v-align-c">
          <!-- <el-checkbox class="mar-l-14 mar-r-0" v-model="allChecked" @change="selectAll"><span class="mar-l-20">当页全选</span></el-checkbox>
          <span class="pad-l-4 pad-r-4">|</span>
          <div class="width-80">已选{{multipleSelection.length}}项</div> -->
          <el-button @click="exportAll">导出</el-button>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="batPayList" v-loading="listLoading" element-loading-text="加载中"
          style="width: 100%" header-cell-class-name="default-header" row-class-name="default-row">
          <el-table-column :key="Math.random()" width="200px" label="经销商" v-if="!getMemberId()" fixed="left">
            <template slot-scope="scope">
              <div v-if="scope.row.memberNickname">
                <div>{{scope.row.memberNickname}}</div>
                <div v-if="scope.row.memberPhone" style="font-size: 14px;">{{scope.row.memberPhone}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="230px" label="支付单号" prop="payNo"></el-table-column>
          <el-table-column width="200px" label="支付时间" prop="payTime"></el-table-column>
          <el-table-column width="200px" label="订单笔数" prop="orderNum"></el-table-column>
          <el-table-column width="200px" label="支付金额" prop="orderAmount"></el-table-column>
          <el-table-column width="200px" label="支付方式" prop="payType">
            <template slot-scope="scope">
              <template>
                {{ dict.payType[scope.row.payType]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column width="200px" label="支付状态" prop="payStatus">
            <template slot-scope="scope">
              <template>
                {{ dict.payStatus[scope.row.payStatus]}}
              </template>
            </template>
          </el-table-column>
          <el-table-column min-width="180px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" size="medium" v-if="getMemberId() && scope.row.payStatus == 100"
                @click="showPay(scope.row)">支付</el-button>
              <el-button type="text" size="medium" v-if="!getMemberId() && scope.row.payStatus == 110"
                @click="batPayConfirmDialog(scope.row)">确认收款</el-button>
              <el-button type="text" size="medium" @click="showDetail(scope.row)">查看订单明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background 
          @size-change="handleSizeChange" 
          @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage" 
          :page-sizes="[10, 20, 50, 100]" 
          :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" 
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 支付dialog -->
    <el-dialog title="支付中心" :visible.sync="orderPayVisible" width="700px" :show-close="false"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <order-pay :showFlag="orderPayVisible" :batPayId="batPayId" @doClose="doCloseOrderPay"></order-pay>
    </el-dialog>

  </div>
</template>

<script>
  import { pageBatPay, batPayConfirm } from '@/api/goods/bat-pay'
  import { downloadFile } from '@/api/common/common'
  import orderPay from '@/views/goods/order/components/order-pay'

  export default {
    components: {
      orderPay
    },
    data() {
      return {
        total: 0,
        listLoading: true,
        searchListQuery: {},
        defaultQuery: {
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          currentPage: 1,
          size: 10
        },
        batPay: {
          payTimeArray: [],
          textCol: 'payNo',
          textValue: '',
          payType: '',
          memberId: this.getMemberId()
        },
        dict: {},
        batPayList: [],
        orderPayVisible: false,
        // 支付订单id
        batPayId: ''
      }
    },
    // 初始化页面
    created() {
      this.searchListQuery = {
        ...this.defaultQuery
      }
      this.init()
    },
    methods: {
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.init()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.init()
      },
      setSearchListQuery() {
        // 搜索状态
        const currentPage = this.searchListQuery.currentPage
        const size = this.searchListQuery.size
        this.searchListQuery = {
          ...this.defaultQuery
        }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.supplierId = this.getSupplierId()
        this.searchListQuery.currentPage = currentPage
        this.searchListQuery.size = size
        this.searchListQuery.dateColumn = 'payTime'
        this.searchListQuery.startDate = (this.batPay.payTimeArray && this.batPay.payTimeArray.length > 0) ? this.batPay
          .payTimeArray[0] : ''
        this.searchListQuery.endDate = (this.batPay.payTimeArray && this.batPay.payTimeArray.length > 1) ? this.batPay
          .payTimeArray[1] : ''
        this.searchListQuery[this.batPay.textCol] = this.batPay.textValue
        this.searchListQuery.payType = this.batPay.payType
      },
      init() {
        this.listLoading = true
        this.setSearchListQuery()
        pageBatPay(this.searchListQuery).then(response => {
          if (response.isError) {
            return
          }
          this.total = response.data.total
          this.batPayList = response.data.records
          this.dict = response.data.dict
          this.listLoading = false
        })
      },
      showDetail(row) {
        this.$router.push({
          path: '/order/member-account/detail/index',
          query: {
            batPayId: row.batPayId
          }
        })
      },
      closePayInfo(file) {
        this.orderPayVisible = false
        this.init()
      },
      showPay(row) {
        this.orderPayVisible = true
        this.batPayId = row.batPayId
      },
      exportAll() {
        this.setSearchListQuery()
        downloadFile('/order/batPay/exportData', this.searchListQuery, '支付单.xlsx')
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      resetSearch() {
        this.searchListQuery = {
          ...this.defaultQuery
        }
        this.batPay = {
          payTimeArray: [],
          textCol: 'payNo',
          textValue: '',
          payType: '',
          memberId: this.getMemberId
        }
        this.init()
      },
      batPayConfirmDialog(row) {
        this.$confirm('确定该支付单金额已到账？', '提示', {
          confirmButtonText: '确认收款',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.toBatPayConfirm(row)
        }).catch(() => {})
      },
      toBatPayConfirm(row) {
        batPayConfirm(row.batPayId).then(response => {
          if (response.isError) return
          this.init()
        })
      },
      // 关闭支付事件
      doCloseOrderPay(refreshFlag) {
        this.orderPayVisible = false
        if (refreshFlag) {
          this.$emit('updateOrderStat')
          this.initList()
        }
      }
    }
  }
</script>

<style lang="less" scoped>

</style>